<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{margin: 0px;
            bottom: 0px; 
            padding:0px;
            list-style: none;
            text-decoration: none;


        }
          body{
       display: flex;
       height:100vh;
        align-items: center;
        justify-content: center;
        background-color: rgb(34, 69, 52);
    }
    .shell{
            width: 1000px;
            height: 600px;
            position: relative;
             overflow: hidden; 
            border-radius: 5px;
            border: 10px #fff solid;
            box-shadow: 20px 30px 20px rgb(18, 31, 27);

    }
    .images{
        width:600%;
        height: 100%;
        display: flex;
        position: absolute;
        left: 0;
        transition: .2s;
    }
    .img{
        width: 100%;
        background-size: cover;

    }
    .img:nth-child(1)
    {
        background-image: url("images/portfolio/01.jpg");

    }
    .img:nth-child(2)
    {
        background-image: url("images/portfolio/02.jpg");

    }
    .img:nth-child(3)
    {
        background-image: url("images/portfolio/03.jpg");

    }
    .img:nth-child(4)
{
    background-image: url("images/portfolio/04.jpg");

}
.img:nth-child(5)
{
    background-image: url("images/portfolio/05.jpg");

}
.img:nth-child(6)
{
    background-image: url("images/portfolio/06.jpg");
}
  
    .min-images{
        display: flex;
        justify-content: space-evenly;
        position: absolute;
        bottom: 20px;
        width: 40%;
        z-index: 999;
        right: 30%;
    }
    .min{
        width: 20px;
        height: 20px;
        /* 鼠标悬浮时显示按钮 */
        cursor: pointer;
        border-radius: 50%;
        background-size: cover;
        border: solid 5px rgba(255, 255, 255, 0.5);
        /* 照片偏移量 */
        background-position: -50px 0;
         
    }
    .min:nth-child(1),
    .min:nth-child(2),
    .min:nth-child(3),
    .min:nth-child(4),
    .min:nth-child(5),
    .min:nth-child(6)
    {
        background-color: rgb(63, 141, 115);

    }
    
    .button{
        width: 100%;
        height:100%;
        position: absolute;
        display: flex;
        justify-content: space-between;
        user-select: none;

    }
    .button-left,
    .button-right{
        font-size: 50px;
        color: #fff;
        background-color: rgba(73, 73, 73, 0.7);
        padding: 0 20px;
        line-height: 500px;
        cursor: pointer;

    }

    </style>
  
    
</head>
<body>
    <div class="shell">
        <ul class="images" class="img-responsive">
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
        </ul>
        <ul class="min-images">
            <li class="min"></li>
            <li class="min"></li>
            <li class="min"></li>
            <li class="min"></li>
            <li class="min"></li>
            <li class="min"></li>
        </ul>
        <div class="button">
            <div class="button-left"><</div>
            <div class="button-right">></div>
        </div>
    </div>
</body>
<script>
    let left=document.querySelector('.button-left')
    let right=document.querySelector('.button-right')
    let min=document.querySelectorAll('.min')
    let images=document.querySelector('.images')
    let index=0
    let time
    // 定义当前图片位置
    function position(){
        images.style.left=(index * -100)+"%"

    }
    function add()
    {
       if(index>=min.length-1)
       {
           index=0
       }else{
           index++
       }
    }
    function desc()
    {
       if(index<1)
       {
           index=min.length-1
       }else{
           index--
       }
    }
    function timer()
    {
        time=setInterval(()=>{
            index++
            desc()
            add()
            position()

        },3000)
    }
    left.addEventListener('click',()=>{
             desc()
            position()
            clearInterval(time)
            timer()
    })
    right.addEventListener('click',()=>{
             add()
            position()
            clearInterval(time)
            timer()
    })

    for(let i=0;i<min.length;i++)
    {
        min[i].addEventListener('click',()=>{
            index=i
            position()
            clearInterval(time)
            timer()
        })
    }
    timer()
 
</script>
</html>
